<template>
	<div class="glBody showone">
		<view class="modoels">
			<text class="title">{{title}}</text>
			<div class="Item_out" v-for="(item,index) in font_lsit">
				<view class="fgx">{{item.title}}</view>
				<view class="bodys">
					<view class="Item" v-for="(val,nub) in item.lass_list" @click="rundata(nub,val)">
						<i :class="['iconfont',val.icon]" style="color: #2283e4; font-size: 27px;"></i>
						<text class="texts">{{val.name}}</text>
					</view>
				</view>
				<div class="Item_hr"></div>
			</div>
		</view>	
	</div>
</template>

<script>

export default {
		props: {
			rows: {
				default:''
			},
			titles: {
				default:''
			}
		},
		data(){
			return {
				modular: [{name: '添加'}],
				title: '',
				font_lsit: []
			}
		},
		mounted() {
			this.modular = this.rows;
			this.title = this.titles;
			this.font_lsit = this.rows;
		},
		methods:{
			rundata(val,itme){
				this.$emit('rundata',val,itme);
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.Item_hr {
		margin-top: 30px;
		border: 1px solid #cacaca;
		width: 100% !important;
	}
	
	.glBody {
		width: 750rpx;
		height: 100%;
		background-color: #fff;
		padding-top:1rpx;
		padding-bottom: 20rpx;
		margin-bottom:20rpx;
		border-bottom-right-radius: 8px;
	    border-bottom-left-radius: 8px;
	}
	.showone {
		border-radius: 8px;
	}
	
	.Item_out {
		padding-top: 3%;
	}
	
	.modoels {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		.float-dom{
			display:flex;
			justify-content: space-around;
			.title-one {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #1296db;
				color: #1296db;
			}
			.title-tow {
				padding-bottom: 20rpx;
			}
			.titles {
				border-bottom: 1px solid #1296db;
				color: #1296db;
			}
			
		}
		.title {
			font-size: 35rpx;
			color: black;
			font-weight: bold;
		}
	
		.fgx {
			width: 690rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			font-weight: 900;
			margin-bottom: 20rpx;
			padding: 0 0 20rpx 10rpx;
			font-size: 15px;
			color: #333333;
		}
	
		.bodys {
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			.Item {
				margin-top: 30rpx;
				width: 172rpx;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.iconfontSize {
					color: #007AFF;
					font-size: 45rpx;
				}
	
				.texts {
					font-size: 30rpx;
					text-align: center;
				}
			}
		}
	}
	
	
	
</style>
